<template>
  <div>
    <a-button
      type="primary"
      @click="openNotification('topLeft')"
    >Open the notification box</a-button>
  </div>
</template>

<script>
import { h } from 'vue';
import { SmileOutlined } from '@ant-design/icons-vue'
import { placements } from 'ant-design-vue/es/vc-tour/placements';

export default {
  name: '',
  components: {},
  data() {
    return {
    }
  },
  created() { },
  mounted() { },
  methods: {
    openNotification(placement) {
      this.$notification.error({
        key: 'nihao',
        message: 'Notification Title',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',

        onClick: () => {
          console.log('Notification Clicked!');
        },
        style: {
          width: '300px',

        },
        placement

      });
      setTimeout(() => {
        this.$notification.open({
          key: 'nihao',
          message: 'New Title',
          description: 'New description.',
          placement
        });
      }, 1000);
    },
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
